<template>
    <div class="element element--article" ref="childElements" style="min-height: 100%; " v-for="item in props.lastRightData" :key='item.id'
        :style="{ flex: '0 0 ' + props.flexWidth + '%' }">
        <figure class="article__figure" ref="figure">
            <router-link
              :to="{
                name: 'NewDetail',
                params: { uuid: item.uuid, author: item.author },
              }"
            >
            <a class="figure__image disableShadowBox">
                <img class="lazyautosizes lazyloaded" :src='item.imgUrl'>
                <img v-if="item.imgUrl === null" class="lazyautosizes lazyloaded" src='https://images.barrons.com/im-63581282'>
            </a>
        </router-link>
            
        </figure>
        <div class="article__content" ref="article">
            <h3 class="article__headline">
                <router-link
              :to="{
                name: 'NewDetail',
                params: { uuid: item.uuid, author: item.author },
              }"
            >
                <a class="link">
                    {{ item.title }}
                </a>
            </router-link>
            </h3>
            <div class="article__details" v-if='item.createTime'>
                <span class="article__timestamp">{{ formateDate(item.createTime) }}</span>
                <!-- <span class="article__author">{{ item.author }}</span> -->
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['lastRightData', 'flexWidth'])
const emits = defineEmits(["childElementHeight"])
import { formateDate }   from "@/utils/timeHandle.js"
</script>
<style scoped lang='scss'>
</style>